(function(){
    /*节点*/
   let swipr = document.querySelector('.swipr'),
       swiprul = swipr.querySelector('ul'),
       swiprindex = document.querySelector('.swipr-index'),
       lis = swiprindex.querySelectorAll('li');
    /* 计数 */
   let num = 0,
    focusWidth = swiprindex.offsetWidth;
       const swiprCall = function swiprCall(){ 
            num++; 
            if(num == 5){
                num = 0;
                swiprul.style.left = '0px';
              };

               animate(swiprul, focusWidth * -num);
               for(var i = 0; i < lis.length;i++){
                lis[i].className = '';
                }
               lis[num].className = 'active';
           }

          // 定时器
          var outtime = setInterval(() => {
            swiprCall();
           }, 2000);
     
       
        for(var i = 0; i < lis.length;i++){
            lis[i].setAttribute('swipr-data',i);
            lis[i].addEventListener('mouseover',function(){
                clearInterval(outtime);
                outtime = null;
                let index = this.getAttribute('swipr-data');
                num = index;
                animate(swiprul, focusWidth * -index);
                for(var i = 0; i < lis.length;i++){
                    lis[i].className = '';
                }
                this.className = 'active';
                });
            };
        swiprindex.addEventListener('mouseout',function(){

                    outtime = setInterval(() => {
                    swiprCall();
                   }, 2000);
        });
})();